"use client";

import React, { useState } from "react";
import {
  JointState,          // 关节状态类型
  UpdateJointDegrees,   // 更新单个关节角度的函数类型
  UpdateJointsDegrees,  // 批量更新关节角度的函数类型
  UpdateJointSpeed,     // 更新单个关节速度的函数类型
  UpdateJointsSpeed,    // 批量更新关节速度的函数类型
} from "../../../hooks/useRobotControl";
import { RevoluteJointsTable } from "./RevoluteJointsTable";     // 旋转关节控制表格组件
import { ContinuousJointsTable } from "./ContinuousJointsTable"; // 连续关节控制表格组件
import { RobotConfig } from "@/config/robotConfig";  // 机器人配置类型
import Link from "next/link";

/**
 * 控制面板组件的属性接口
 */
type ControlPanelProps = {
  jointStates: JointState[];                    // 所有关节的当前状态数组
  updateJointDegrees: UpdateJointDegrees;       // 更新单个关节角度的函数
  updateJointsDegrees: UpdateJointsDegrees;     // 批量更新关节角度的函数
  updateJointSpeed: UpdateJointSpeed;           // 更新单个关节速度的函数
  updateJointsSpeed: UpdateJointsSpeed;         // 批量更新关节速度的函数

  isConnected: boolean;                         // 机器人连接状态

  connectRobot: () => void;                     // 连接机器人的函数
  disconnectRobot: () => void;                  // 断开机器人连接的函数
  keyboardControlMap: RobotConfig["keyboardControlMap"];      // 键盘控制映射配置
  compoundMovements?: RobotConfig["compoundMovements"];      // 复合运动配置
};

/**
 * 控制面板组件 - 提供机器人关节控制和连接管理的界面
 * 
 * @param props ControlPanelProps - 组件属性
 */
export function ControlPanel({
  jointStates,          // 关节状态数组
  updateJointDegrees,   // 更新单个关节角度的函数
  updateJointsDegrees,  // 批量更新关节角度的函数
  updateJointSpeed,     // 更新单个关节速度的函数
  updateJointsSpeed,    // 批量更新关节速度的函数
  isConnected,          // 机器人连接状态
  connectRobot,         // 连接机器人的函数
  disconnectRobot,      // 断开机器人连接的函数
  keyboardControlMap,   // 键盘控制映射
  compoundMovements,    // 复合运动配置
}: ControlPanelProps) {
  // 控制面板折叠状态
  const [isCollapsed, setIsCollapsed] = useState(false);
  // 连接状态管理
  const [connectionStatus, setConnectionStatus] = useState<
    "idle" | "connecting" | "disconnecting" | "failed"
  >("idle");

  /**
   * 处理连接机器人的操作
   * 更新连接状态并处理可能的错误
   */
  const handleConnect = async () => {
    setConnectionStatus("connecting");
    try {
      await connectRobot();
      setConnectionStatus("idle");
    } catch {
      setConnectionStatus("failed");
    }
  };

  /**
   * 处理断开机器人连接的操作
   * 确保状态最终返回到空闲状态
   */
  const handleDisconnect = async () => {
    setConnectionStatus("disconnecting");
    try {
      await disconnectRobot();
    } finally {
      setConnectionStatus("idle");
    }
  };

  // 将关节状态分类为旋转关节和连续关节
  const revoluteJoints = jointStates.filter(
    (state) => state.jointType === "revolute"    // 筛选旋转类型的关节
  );
  const continuousJoints = jointStates.filter(
    (state) => state.jointType === "continuous"  // 筛选连续类型的关节
  );

  // 当控制面板处于折叠状态时，只显示展开按钮
  if (isCollapsed) {
    return (
      <div className="absolute bottom-5 left-5 z-50">
        <button
          onClick={() => setIsCollapsed(false)}
          className="bg-gray-700 hover:bg-gray-600 text-white text-sm px-3 py-1.5 rounded"
        >
          显示控制面板
        </button>
      </div>
    );
  }

  // 控制面板完整界面
  return (
    <div className="absolute bottom-5 left-5 bg-zinc-900 bg-opacity-80 text-white p-4 rounded-lg max-h-[90vh] overflow-y-auto z-50 text-sm">
      {/* 标题栏 */}
      <h3 className="mt-0 mb-4 border-b border-zinc-600 pb-1 font-bold text-base flex justify-between items-center">
        <span>关节控制</span>

        <button
          onClick={() => setIsCollapsed(true)}
          className="ml-2 text-xl hover:bg-zinc-800 px-2 rounded-full"
          title="折叠控制面板"
        >
          ×
        </button>
      </h3>

      {/* 旋转关节控制表格 */}
      {revoluteJoints.length > 0 && (
        <RevoluteJointsTable
          joints={revoluteJoints}                    // 旋转关节状态数组
          updateJointDegrees={updateJointDegrees}    // 更新单个关节角度
          updateJointsDegrees={updateJointsDegrees}  // 批量更新关节角度
          keyboardControlMap={keyboardControlMap}    // 键盘控制映射
          compoundMovements={compoundMovements}      // 复合运动配置
        />
      )}

      {/* 连续关节控制表格 */}
      {continuousJoints.length > 0 && (
        <ContinuousJointsTable 
          maxSpeed={100}                           // 最大速度限制
          joints={continuousJoints}                // 连续关节状态数组
          updateJointSpeed={updateJointSpeed}      // 更新单个关节速度
          updateJointsSpeed={updateJointsSpeed}    // 批量更新关节速度
        />
      )}

      {/* 连接控制区域 */}
      <div className="mt-4 flex justify-between items-center">
        <button
          onClick={isConnected ? handleDisconnect : handleConnect}
          disabled={connectionStatus !== "idle" && connectionStatus !== "failed"}
          className={`text-sm px-3 py-1.5 rounded w-full ${
            // 根据连接状态设置按钮样式
            connectionStatus === "failed"
              ? "bg-orange-600 hover:bg-orange-500"  // 连接失败状态
              : isConnected
              ? "bg-red-600 hover:bg-red-500"       // 已连接状态
              : "bg-blue-600 hover:bg-blue-500"     // 未连接状态
          }  "text-white"  ${
            // 禁用状态样式
            connectionStatus !== "idle" && connectionStatus !== "failed"
              ? "opacity-50 cursor-not-allowed"
              : ""
          }`}
        >
          {/* 根据连接状态显示不同的按钮文本 */}
          {connectionStatus === "failed"
            ? "连接失败。请检查串口权限。Linux系统可以使用命令：sudo chmod 776 /dev/ttyACM0"
            : connectionStatus === "connecting"
            ? "正在连接..."
            : connectionStatus === "disconnecting"
            ? "正在断开连接..."
            : isConnected
            ? "断开机器人连接"
            : "连接真实机器人"}
        </button>
      </div>
      <br />
      {/* URDF文件链接 */}
      <Link
        className="text-blue"
        href="https://github.com/dora-bambot/dora-bambot.github.io/tree/main/website/public/URDF"
      >
        点击获取URDF文件
      </Link>
    </div>
  );
}
